<template>
  <div>
    <h2>哥是爷爷</h2>
    <p>timestamp: {{ timestamp }}</p>
    <hr />
    <Parent></Parent>
  </div>
</template>

<script>
import { computed } from "vue";

import Parent from "./Parent.vue";

export default {
  //   provide: {
  //     message: "hello!",
  //   },

  components: {
    Parent,
  },

  data() {
    return {
      timestamp: Date.now(),
      message: "hello!",
    };
  },

  provide() {
    // 使用函数的形式，可以访问到 `this`
    return {
        message: this.message,
        // timestamp: this.timestamp,

        // 后代什么时候访问timestamp 就什么时候调用computed现计算
        timestamp: computed(()=>this.timestamp),
    };
  },

  mounted() {
    setInterval(() => {
      this.timestamp = Date.now();
    }, 1000);
  },
};
</script>

<style lang="scss" scoped></style>
